<template>
  <div>
    <h2 ref="title">{{info.name}}</h2>
    <button @click="changeData">换名字</button>
  </div>
</template>

<script>
import {reactive, ref, watch} from "vue";

export default {
  setup(){
    const info = reactive({name:"wmy",age:18})

    //1.监听watch时候，传入一个getter函数
    // watch(() => info.name,(newValue,oldValue) => {
    //   console.log("newValue:" ,newValue,"oldValue:",oldValue);
    // })

    //2.传入一个可相应对象 ref/reactive对象
    //情况一：reactive对象获取到的newValue和oldValue都是reactive对象
    // watch(info,(newValue,oldValue) => {
    //   console.log("newValue:" ,newValue,"oldValue:",oldValue);
    // })

    //情况二；ref对象获取到的newValue和oldValue都是本身
    const name = ref("wql");
    watch(name,(newValue,oldValue) => {
      console.log("newValue:" ,newValue,"oldValue:",oldValue);
    })


    const changeData = () => {
       name.value = "wj"
    }
    
    return{
      changeData,
      info
    }
  }
}
</script>

<style scoped>

</style>
